<template>
  <view class="put-orders">
    <view class="put-orders-title">
      取单
    </view>
    <view class="put-orders-content">
      <view class="put-orders-content-left">
        <view class="order-item" @click="selectOrder(item)" :class="{active:item._id===curOrder}"
          v-for="(item,index) in orders" :key="item._id">
          <view class="top flex justify-between">
            <view class="number">
              单号：{{item.number||''}}
            </view>
            <view class="">
              {{item._putInTime||''}}
            </view>
          </view>
          <view class="bottom">
            商品:{{item._goods_names||''}}
          </view>
        </view>
      </view>
      <view class="put-orders-content-right" v-if="curOrderInfo">
        <view class="top flex justify-between">
          <view class="top-item">
            单号：{{curOrderInfo.number}}
          </view>
          <view class="top-item" v-if="loginUser&&loginUser.real_name">
            <!-- 操作员：陈总 -->
            操作员:{{loginUser.real_name || ''}}
          </view>
          <view class="top-item" v-if="curOrderInfo.curAssistant&&curOrderInfo.curAssistant.name">
            <!-- 营业员：李泽盛 -->
            营业员：{{curOrderInfo.curAssistant.name}}
          </view>
          <view class="top-item">
            挂单时间：{{curOrderInfo._putInTime||'-'}}
          </view>
        </view>
        <view class="bottom">
          <view class="bottom-header">
            <view class="bottom-header-item name">
              商品名称
            </view>
            <view class="bottom-header-item">
              单价（元）
            </view>
            <view class="bottom-header-item">
              数/重量
            </view>
            <view class="bottom-header-item">
              金额（元）
            </view>
          </view>
          <view class="flex-1 goods-list">
            <view class="bottom-list" v-for="item in curOrderInfo.cart">
              <view class="bottom-list-col name">
                {{item.goods_name||''}}
              </view>
              <view class="bottom-list-col">
                {{item.sale_price||''}}
              </view>
              <view class="bottom-list-col">
                {{item.amount||''}}
              </view>
              <view class="bottom-list-col">
                {{(item.amount * item.sale_price).toFixed(2)||''}}
              </view>
            </view>
          </view>
          <view class="bottom-handler-bar flex">
            <view class="text-sm margin-right-xl">
              共<text class="margin-lr-xs text-red">{{totalAmount||''}}</text>件
            </view>
            <view class="text-lg text-red">
              ￥{{totalPrice||''}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="put-orders-bottom">
      <button class="button bg-gray" @click="removeOrder"><text class="cuIcon-delete margin-right"></text> 删除订单</button>
      <view class="">
        <button class="button bg-gray" @click="cancel">取消</button>
        <button class="button margin-left-lg" @click="putInOrder">取单</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "put-orders-popup",
    props: {
      orders: {
        type: Array
      },
    },
    computed: {
      totalPrice() {
        if (Array.isArray(this.curOrderInfo?.cart)) {
          let num = this.curOrderInfo.cart.reduce((res, cur) => {
            res += cur.sale_price * ( cur?.amount || cur?.goods_num||0);
            return res
          }, 0)
          return num.toFixed(2)
        }
      },
      totalAmount() {
        if (Array.isArray(this.curOrderInfo?.cart)) {
          return this.curOrderInfo.cart.reduce((res, cur) => {
            res += Number(cur.amount);
            return res
          }, 0)
        }
      },
      curOrderInfo() {
        return this.orders.find(item => item._id === this.curOrder)
      }
    },
    data() {
      return {
        curOrder: '',
      };
    },
    created() {
      if (this.orders.length > 0) {
        this.curOrder = this.orders[0]._id
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      putInOrder() {
        this.$emit('confirm', this.curOrder)
        if (this.curOrder?.curAssistant) {
          this.$store.commit('SET_STATE', {
            key: '$curAssistant',
            value: this.curOrder?.curAssistant
          })
        }
        this.curOrder = ''
      },
      selectOrder(e) {
        if (e?._id) {
          this.curOrder = e._id
        }
      },
      removeOrder() {
        let index = this.orders.findIndex(item => item._id && item._id === this.curOrderInfo?._id)
        if (index > -1) {

          let orders = this.orders
          orders.splice(index, 1)
          this.$store.commit('SET_PUTUP_ORDERS', orders)
          if (this.orders.length > 0) {
            this.curOrder = this.orders[0]._id
          } else {
            this.curOrder = ''
            this.cancel()
          }
          uni.showToast({
            title: '删除成功',
            icon: ''
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import url('@/common/css/text-overflow.scss');

  .put-orders {
    background-color: #fff;
    border-radius: 2rem;
    height: 80vh;
    width: 80vw;
    padding: 2rem;
    display: flex;
    flex-direction: column;

    &-title {
      padding: 0 2rem;
      font-size: 3rem;
      font-weight: bold;
    }

    &-content {
      flex: 1;
      padding: 1rem;
      display: flex;
      overflow: hidden;

      &-left {
        padding: 1rem;
        width: 50rem;
        height: 100%;
        overflow-y: scroll;
        border-radius: 1rem;

        .order-item {
          width: 100%;
          border-radius: 1rem;
          padding: 2rem 1.6rem;
          background-color: #F5F5F5;
          border: 1px solid #F5F5F5;
          color: #333;
          font-size: $retail-font-size-xs;
          margin-bottom: 1.6rem;

          &.active {
            background-color: $retail-color-primary-light;
            border-color: $retail-color-primary;
            color: $retail-color-primary;
          }

          .top {
            line-height: 3.5rem;
          }

          .number {
            font-size: $retail-font-size-sm;
            font-weight: 700;
          }

          .bottom {
            @include textOverflow(100%, 1)
          }
        }
      }

      &-right {
        flex: 1;
        padding: 1rem;
        height: 100%;
        border-radius: 1rem;
        font-size: $retail-font-size-xs;
        display: flex;
        flex-direction: column;

        .top {
          width: 100%;
          height: 6rem;
          border-radius: 1rem;
          background: #F5F5F5;
          line-height: 6rem;
          padding: 0 2.4rem;
        }

        .bottom {
          margin-top: 2rem;
          width: 100%;
          flex: 1;
          border: 1px solid $retail-color-primary;
          border-radius: 1rem;
          font-size: $retail-font-size-sm;
          display: flex;
          flex-direction: column;
          height: 50vh;
          overflow: hidden;

          .bottom-header {
            display: flex;
            padding: 1rem 3rem;
            font-weight: 700;
            background-color: $retail-color-primary-light;

            .bottom-header-item {
              flex: 1;
            }
          }

          .goods-list {
            max-height: 40vh;
            overflow: hidden;
            overflow-y: scroll;
          }

          .bottom-list {
            display: flex;
            padding: 1rem 3rem;

            .bottom-list-col {
              flex: 1;

              &.name {
                @include textOverflow(100%, 4)
              }
            }
          }

          .bottom-handler-bar {
            padding: 1rem 3rem;
            justify-content: flex-end;
            align-items: center;

            .text-sm {
              font-size: $retail-font-size-sm;
            }

            .text-red {
              color: #FF5733;
            }

            .text-lg {
              font-size: $retail-font-size-lg;
            }
          }
        }
      }
    }

    .margin-left-lg {
      margin-left: 3rem;
    }

    .bg-gray {
      background: #F5F5F5;
      color: #333;
    }

    &-bottom {
      height: 12rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .button {
        font-size: 2.6rem;
        height: 7.5rem;
        line-height: 7.5rem;
        min-width: 20rem;
        text-align: center;
      }
    }
  }
</style>
